<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>消息</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link type="text/css" rel="stylesheet" href="/static/css/common.css">
    <link type="text/css" rel="stylesheet" href="/static/css/hbstyle.css">
    <link type="text/css" rel="stylesheet" href="/static/css/ycstyle.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            var formId      = "{$formId}"; //我
            var toId        = "{$toId}"; //对方
            var form_avatar = null;
            var to_avatar   = null;
            var is_online   = null;

            //创建一个socket实例
            var socket      = null; //初始为null
            socket = new WebSocket("ws://127.0.0.1:8282");
            socket.onmessage = function (ev) { //使用进行回调（获取）
                console.log(ev);
                var data = JSON.parse(ev.data);

                switch (data.type){
                    case 'init':
                        var bind = '{"type":"bind","formId":"'+formId+'"}';
                        socket.send(bind); //发送给服务器要求绑定用户
                        getUserInfo(formId,toId); //获取用户信息（头像）
                        load_message(formId,toId); //获取用户历史消息，最新的的10条
                        var online = '{"type":"online","formId":"'+formId+'","toId":"'+toId+'"}';
                        socket.send(online); //发送给服务器判断对话用户是否在线
                        break;
                    case 'text':
                        if(toId==data.formId){
                            $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail">\n' +
                                '        <div class="hb-xiaoxi-detail-touxiang"><img src="'+to_avatar+'"></div>\n' +
                                '        <div class="hb-xiaoxi-detail-dialog">\n' +
                                '            <div class="hb-xiaoxi-detail-sanjiao">\n' +
                                '                <em></em><span></span>\n' +
                                '            </div>\n' +
                                '            '+data.content+'\n' +
                                '        </div>\n' +
                                '    </div>');
                            var h = $(document).height()-$(window).height();
                            $(document).scrollTop(h);
                            return;
                        }
                    case 'img':
                        if(toId==data.formId){
                            $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail">\n' +
                                '        <div class="hb-xiaoxi-detail-touxiang"><img src="'+to_avatar+'"></div>\n' +
                                '        <div class="hb-xiaoxi-detail-dialog">\n' +
                                '            <div class="hb-xiaoxi-detail-sanjiao">\n' +
                                '                <em></em><span></span>\n' +
                                '            </div>\n' +
                                '            <img src="'+data.content+'">\n' +
                                '        </div>\n' +
                                '    </div>');
                            var h = $(document).height()-$(window).height();
                            $(document).scrollTop(h);
                            return;
                        }
                    case 'save':
                        // 这里直接将数据持久话保存到数据库中（使用AJAX方式）
                        $.post("{:url('save_message')}",{"formid":formId,"toid":toId,"content":data.content,"is_read":data.is_read},function (data) {
                            if(data.code==0){
                                return ;
                            }
                        },JSON)
                        return;
                    case 'online':
                        if(data.status==1){
                            is_online = 1;
                            $('#online').text('用户在线');
                        } else {
                            is_online = 0;
                            $('#online').text('用户不在线');
                        }
                        return;
                }
            }
            $(".hb-xiaoxi-dibu-1").click(function () {

                var talk_message = $('#talk_message').val(); //获取输入框内容
                if(talk_message==''){
                    return ;
                }
                var data = '{"type":"text","content":"'+talk_message+'","formId":"'+formId+'","toId":"'+toId+'"}';
                socket.send(data); //发送信息给服务器
                $('#talk_message').val(''); //清空输入框
                $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail-right">\n' +
                    '        <div class="hb-xiaoxi-detail-dialog-right">\n' +
                    '            <div class="hb-xiaoxi-detail-sanjiao-right">\n' +
                    '                <em></em>\n' +
                    '            </div>\n' +
                    '            '+talk_message+'\n' +
                    '        </div>\n' +
                    '        <div class="hb-xiaoxi-detail-touxiang-right"><img src="'+form_avatar+'"></div>\n' +
                    '    </div>');
                var h = $(document).height()-$(window).height();
                $(document).scrollTop(h);


            })

            // 获取用户信息
            function getUserInfo(formId,toId) {
                $.ajax({
                    url:"{:url('getUserInfo')}",
                    type:'POST',
                    cache:false,
                    data:{"formid":formId,"toid":toId},
                    dataType:'json',
                    async: false,
                    success:function (data, status, xhr) {
                        if(data.code==0){
                            // 赋值头像
                            form_avatar  = data.data.form_avatar;
                            to_avatar    = data.data.to_avatar;
                        }
                    }
                });
                /*
                $.get("{:url('getUserInfo')}",{"formid":formId,"toid":toId},function (e) {
                    if(e.code==0){
                        // 赋值头像
                        form_avatar  = e.data.form_avatar;
                        to_avatar    = e.data.to_avatar;
                    }
                })
                */
            }

            // 加载历史记录
            function load_message() {
                $.post("{:url('load_message')}",{"formid":formId,"toid":toId},function (data) {
                    if(data.code==0){
                        $.each(data.data,function (index, content) {
                            if(content.formid==formId){
                                if(content.type==1){
                                    $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail-right">\n' +
                                        '        <div class="hb-xiaoxi-detail-dialog-right">\n' +
                                        '            <div class="hb-xiaoxi-detail-sanjiao-right">\n' +
                                        '                <em></em>\n' +
                                        '            </div>\n' +
                                        '            '+content.content+'\n' +
                                        '        </div>\n' +
                                        '        <div class="hb-xiaoxi-detail-touxiang-right"><img src="'+form_avatar+'"></div>\n' +
                                        '    </div>');
                                } else if(content.type==2){
                                    $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail-right">\n' +
                                        '        <div class="hb-xiaoxi-detail-dialog-right">\n' +
                                        '            <div class="hb-xiaoxi-detail-sanjiao-right">\n' +
                                        '                <em></em>\n' +
                                        '            </div>\n' +
                                        '            <img src="'+content.content+'">\n' +
                                        '        </div>\n' +
                                        '        <div class="hb-xiaoxi-detail-touxiang-right"><img src="'+form_avatar+'"></div>\n' +
                                        '    </div>');
                                }

                            } else {
                                if(content.type==1){
                                    $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail">\n' +
                                        '        <div class="hb-xiaoxi-detail-touxiang"><img src="'+to_avatar+'"></div>\n' +
                                        '        <div class="hb-xiaoxi-detail-dialog">\n' +
                                        '            <div class="hb-xiaoxi-detail-sanjiao">\n' +
                                        '                <em></em><span></span>\n' +
                                        '            </div>\n' +
                                        '            '+content.content+'\n' +
                                        '        </div>\n' +
                                        '    </div>');
                                } else if(content.type==2){
                                    $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail">\n' +
                                        '        <div class="hb-xiaoxi-detail-touxiang"><img src="'+to_avatar+'"></div>\n' +
                                        '        <div class="hb-xiaoxi-detail-dialog">\n' +
                                        '            <div class="hb-xiaoxi-detail-sanjiao">\n' +
                                        '                <em></em><span></span>\n' +
                                        '            </div>\n' +
                                        '            <img src="'+content.content+'">\n' +
                                        '        </div>\n' +
                                        '    </div>');
                                }

                            }
                            var h = $(document).height()-$(window).height();
                            $(document).scrollTop(h);

                        })
                    }
                })
            }

            $('#upload_pic').click(function () {
                $("#pic").click();

            });

            // 上传图片
            $("#pic").change(function () {
                var formdata = new FormData;
                formdata.append('formId',formId);
                formdata.append('toId',toId);
                formdata.append('pic',$("#pic")[0].files[0]);
                formdata.append('is_online',is_online);
                $.ajax({
                    url:"{:url('upload_pic')}",
                    type:'POST',
                    cache:false,
                    data:formdata,
                    dataType:'json',
                    processData:false,
                    contentType:false,
                    success:function (data, status, xhr) {
                        if(data.code==0){
                            var imgdata = '{"type":"img","content":"'+data.data+'","formId":"'+formId+'","toId":"'+toId+'"}';
                            socket.send(imgdata); //发送信息给服务器
                            $('.hb-xiaoxi-bg').append('<div class="hb-xiaoxi-detail-right">\n' +
                                '        <div class="hb-xiaoxi-detail-dialog-right">\n' +
                                '            <div class="hb-xiaoxi-detail-sanjiao-right">\n' +
                                '                <em></em>\n' +
                                '            </div>\n' +
                                '            <img src="'+data.data+'">\n' +
                                '        </div>\n' +
                                '        <div class="hb-xiaoxi-detail-touxiang-right"><img src="'+form_avatar+'"></div>\n' +
                                '    </div>');
                            var h = $(document).height()-$(window).height();
                            $(document).scrollTop(h);
                        }
                    }
                });
            });

        });


    </script>
</head>

<body>
<div class="hb-xiaoxi-bg">
    <div class="hb-xiaoxi-detail-center"><span id="online">2018-12-13 11:20</span></div>
    <div class="hb-xiaoxi-detail-center"><span class="hb-xiaoxi-detail-time">2018-12-13 11:20</span></div>
    <!--发件人-->

    <!--我-->

    <div class="hb-xiaoxi-detail-center"><span class="hb-xiaoxi-detail-time">11:30</span></div>



</div>
<style>

    /*a  upload */
    .a-upload {
        padding: 4px 10px;
        height: 30px;
        line-height: 20px;
        position: relative;
        cursor: pointer;
        color: #888;
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        margin-left: 10px;
        *display: inline;
        *zoom: 1
    }

    .a-upload  input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer
    }

    .a-upload:hover {
        color: #444;
        background: #eee;
        border-color: #ccc;
        text-decoration: none
    }
</style>
<!--dibu-->
<div class="hb-xiaoxi-dibu">
    <!-- <button class="hb-xiaoxi-dibu-1">话术库</button>-->
    <div class="hb-xiaoxi-dibu-left"><input type="text" id="talk_message"></div>
    <button class="a-upload" id="upload_pic">+</button>
    <input type="file" name="pic" id="pic" style="display: none;"/>
    <div><input type="button" class="hb-xiaoxi-dibu-1" value="发送"></div>
</div>
</body>
</html>